import { getDistrictList, getHospitalList } from '../../../../src/api/hospital/hospitalList';
import { IDistrictList } from '../../../../src/api/hospital/model/hospitalListTypes';
import { Button, Card, Form, Input, Select, Space, Table } from 'antd'
import { ColumnsType } from 'antd/lib/table';
import React, { useEffect, useState } from 'react'

const { Option } = Select;
export default function HospitalList() {
    const [form] = Form.useForm();
    const columns: ColumnsType<any> = [
        {
            title: '序号'
        },
        {
            title: '医院logo'
        },
        {
            title: '医院名称'
        },
        {
            title: '等级'
        },
        {
            title: '详细地址'
        },
        {
            title: '状态'
        },
        {
            title: '创建时间'
        },
        {
            title: '操作'
        }
    ];
    let [provinceList, setProvinceList] = useState<IDistrictList>([])
    let [cityList, setCityList] = useState<IDistrictList>([])
    let [dictList, setDictList] = useState<IDistrictList>([])
    // 医院类型
    let [typeList, setTypeList] = useState<IDistrictList>([])
    // 获取省列表
    const getProvinceList = async () => {
        const provinceList = await getDistrictList(86);
        // 设置省状态数据
        setProvinceList(provinceList);
    }
    // 根据省id 获取是列表并渲染
    const getCityList = async (id: number) => {
        console.log('id: ', id);
        // 将市、区的表单项赋值为undefined
        form.setFieldsValue({
            cityCode: undefined,
            districtCode: undefined
        })
        // 将区的状态数据设置为空数组
        setDictList([]);

        const cityList = await getDistrictList(id);
        setCityList(cityList);

    }
    // 根据市id 获取区列表并渲染
    const getDictList = async (id: number) => {
        console.log('city id: ', id);
        // 将区的表单值设置为undefined
        form.setFieldsValue({
            districtCode: undefined
        })
        const dictList = await getDistrictList(id);
        setDictList(dictList);
    }
    /**
     * 获取医院等级
     */
    const getTypes = async () => {
        let types = await getDistrictList(10000)
        // console.log(types);
        setTypeList(types);
    }

    useEffect(() => {
        getProvinceList(); // 获取省列表
        getTypes();// 获取医院等级列表
    }, [])
    const _getHospitalList = async ()=>{
        let {content, totalElements} = await getHospitalList({page:1,limit:3});
        console.log('content: ', content);
        console.log('total: ', totalElements);
    }
    useEffect(()=>{
        _getHospitalList();
    },[])
    return (
        <Card>
            <Form layout='inline' form={form}>
                <Form.Item name='provinceCode'>
                    <Select
                        className='mb'
                        placeholder='请选择省'
                        style={{ width: 180 }}
                        onSelect={getCityList}

                    >
                        {provinceList.map(province => (
                            <Option value={province.value} key={province.id}>{province.name}</Option>
                        ))}
                    </Select>
                </Form.Item>
                <Form.Item name='cityCode'>
                    <Select
                        placeholder='请选择市'
                        style={{ width: 180 }}
                        onSelect={getDictList}
                    >
                        {cityList.map(city => (
                            <Option key={city.id} value={city.value}>{city.name}</Option>
                        ))}
                    </Select>
                </Form.Item>
                <Form.Item name='districtCode'>
                    <Select placeholder='请选择区' style={{ width: 180 }}>
                        {dictList.map(dict => (
                            <Option key={dict.id} value={dict.value}>{dict.name}</Option>
                        ))}
                    </Select>
                </Form.Item>
                <Form.Item name='hosname'>
                    <Input placeholder='医院名称' />
                </Form.Item>
                <Form.Item name='hoscode'>
                    <Input placeholder='医院编号' />
                </Form.Item>
                <Form.Item name='hostype'>
                    <Select placeholder='医院类型' style={{ width: 180 }}>
                        {typeList.map(type => (
                            <Option key={type.id} value={type.value}>{type.name}</Option>
                        ))}
                    </Select>
                </Form.Item>
                <Form.Item name='status'>
                    <Select placeholder='医院状态' style={{ width: 180 }}>
                        <Option value={0}>未上线</Option>
                        <Option value={1}>已上线</Option>
                    </Select>
                </Form.Item>
                <Form.Item>
                    <Space>
                        <Button type='primary' htmlType='submit'>查询</Button>
                        <Button disabled>清空</Button>
                    </Space>
                </Form.Item>
            </Form>

            <Table
                className='mt'
                columns={columns}
            />
        </Card>
    )
}
